import styles from './styles.module.less'
import {
  appLocalStorage,
  Box,
  Icon,
  Image
} from '@/components'
import gitee from './svgs/gitee.svg'
import { useNavigate } from 'react-router-dom';
import { useState } from 'react';

const Navbar = () => {
  const navigate = useNavigate();
  const [menuShow, setMenuShow] = useState(false);

  const [theme, setTheme] = useState(appLocalStorage.getValue<string>('theme'))

  /**
   * 切换主题
   */
  const changeTheme = () => {
    if (theme === 'dark') {
      document.querySelector('body')?.setAttribute('theme', 'light')
      appLocalStorage.setValue('theme', 'light')
      setTheme('light')
    }
    if (theme === 'light') {
      document.querySelector('body')?.setAttribute('theme', 'dark')
      appLocalStorage.setValue('theme', 'dark')
      setTheme('dark')
    }
  }

  return (
    <nav className={styles.navBar}>
      <ul className={styles.logo} onClick={() => { navigate('/home') }}>
        <li>
          <Image
            width={32}
            height={32}
            src={'/logo/one/favicon.ico'}
          ></Image>
        </li>
        <li>
          Magic UI React
        </li>
      </ul>
      <div className={styles.rightContent}>
        <div className={styles.right}>
          <ul className={styles.navs}>
            <li onClick={() => { navigate('/quickStart') }}>快速开始</li>
            <li onClick={() => { navigate('/compCards') }}>组件</li>
            <li onClick={() => { navigate('/about') }}>关于</li>
          </ul>
        </div>

        <div
          className={styles.theme}
          onClick={() => changeTheme()}
        >
          {theme === 'light' && <Icon size={16} icon={'sun'} />}
          {theme === 'dark' && <Icon size={16} icon={'moon'} />}
        </div>

        <div
          className={styles.menu}
          onClick={() => {
            setMenuShow(state => !state)
          }}
        >
          <Icon
            icon='bars'
            size={16}
          />
        </div>

        <a href='https://gitee.com/guduhuanzheyyx/magic-ui-react' rel='noopener' target="_blank" className={styles.gitee}>
          <img src={gitee} alt="gitee" />
        </a>
      </div>

      {menuShow && (
        <Box className={styles.menus} shadow='base' shadowShow='always' >
          <ul className={styles.navs}>
            <li
              className={styles.item}
              onClick={() => {
                navigate('/quickStart')
                setMenuShow(false)
              }}>
              快速开始
            </li>
            <li
              className={styles.item}
              onClick={() => {
                navigate('/compCards')
                setMenuShow(false)
              }}>
              组件
            </li>
            <li
              className={styles.item}
              onClick={() => {
                navigate('/about')
                setMenuShow(false)
              }}>
              关于
            </li>
          </ul>
        </Box>
      )}
    </nav>
  )
}

export default Navbar